<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path;
%>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>学生期末成绩报告-云校通</title>
    <jsp:include page="/WEB-INF/page/common/_header.jsp"></jsp:include>
    <script src="<%=basePath %>/js/picker.js"></script>
    <script src="<%=basePath %>/js/select.js"></script>
    <style type="text/css">
        th, td {
            line-height: 53px;
        }

        .hhk-style th, .hhk-style td {
            border-right: 1px solid #e0e0e0;
            border-bottom: 1px solid #e0e0e0;
            border-top: 1px solid #e0e0e0;
            border-left: 1px solid #e0e0e0;
        }
    </style>
</head>
<body ontouchstart>
<div class="weui_tab tab-bottom">
    <div class="weui-header bg-blue">
        <div class="weui-header-left"><a onclick="back()" href="javascript:;" class="icon icon-109 f-white">返回</a></div>
        <h1 class="weui-header-title"><span class="schoolYear"></span></h1>
        <div class="weui-header-right">
            <i class="icon icon-74"></i>
            <input type="text" id="schoolYear" readonly style="position: absolute;top: 0;opacity: 0;">
        </div>
    </div>
    <div class="weui_tab_bd">
        <div class="weui_cells afterNone afterNoneBefore mt0">
            <div class="weui_cell bd-t0">
                <div class="weui_cell_hd weui_center_50">
                    ${student.gradeName }(${student.clazz})班
                </div>
                <div class="weui_cell_hd weui_center_50">
                    ${student.studentName}
                </div>
            </div>
        </div>
        <div id="reportResult">
        </div>

        <script id="report-table-template" type="text/x-handlebars-template">
            <div class="weui_cells bd-t0 mt5 mb10">
                <div class="weui_cell lblue bd-t0">
                    <div class="weui_cell_bd weui_cell_primary">
                        <p class="">学科成绩</p>
                    </div>
                </div>
                <div class="weui_cell bd-t0" style="padding:0;">
                    <table class="weui-table hhk-style weui-border-tb">
                        <tr>
                            <th width="25%">语文</th>
                            <th width="25%">阅读理解</th>
                            <th width="25%">数学</th>
                            <th width="25%">计算能力</th>
                        </tr>
                        <tr>
                            <td>{{chinese}}</td>
                            <td>{{read2}}</td>
                            <td>{{math}}</td>
                            <td>{{calculate}}</td>
                        </tr>
                        <tr>
                            <th width="25%">英语PEP</th>
                            <th width="25%">朗文</th>
                            <th width="25%">英语口语</th>
                            <th width="25%">道德法制</th>
                        </tr>
                        <tr>
                            <td>{{english}}</td>
                            <td>{{longman}}</td>
                            <td>{{englishLanguage}}</td>
                            <td>{{quality}}</td>
                        </tr>
                        <tr>
                            <th width="25%">体育</th>
                            <th width="25%">音乐</th>
                            <th width="25%">戏剧</th>
                            <th width="25%">美术</th>
                        </tr>
                        <tr>
                            <td>{{sports}}</td>
                            <td>{{music}}</td>
                            <td>{{theatre}}</td>
                            <td>{{arts}}</td>
                        </tr>
                        <tr>
                            <th width="25%">书法</th>
                            <th width="25%">科学</th>
                            <th width="25%">信息</th>
                            <th width="25%">STEAM</th>
                        </tr>
                        <tr>
                            <td>{{calligraphy}}</td>
                            <td>{{science}}</td>
                            <td>{{infomation}}</td>
                            <td>{{steam}}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="weui_cells bd-t0 mt0 mb10">
                <div class="weui_cell lblue bd-t0">
                    <div class="weui_cell_bd weui_cell_primary">
                        <p class="">评优</p>
                    </div>
                </div>
                <div class="weui_cell">
                    {{appraising}}
                </div>
            </div>
            <div class="weui_cells bd-t0 mt0 mb10">
                <div class="weui_cell lblue bd-t0">
                    <div class="weui_cell_bd weui_cell_primary">
                        <p class="">校内奖项</p>
                    </div>
                </div>
                <div class="weui_cell">
                    {{schoolPrize}}
                </div>
            </div>
            <div class="weui_cells bd-t0 mt0 mb40">
                <div class="weui_cell lblue bd-t0">
                    <div class="weui_cell_bd weui_cell_primary">
                        <p class="">班主任期末评语</p>
                    </div>
                </div>
                <div class="weui_cell">
                    {{comment}}
                </div>
            </div>
        </script>
    </div>
</div>
</body>
<script type="text/javascript">
    $(function () {
        termList();
    });
    var map = new Map();
    var termName;
    var flag = false;

    function termList() {
        $.ajax({
            url: basePath + "/termListForPhone",
            type: 'POST',
            dataType: "json",
            success: function (data) {
                var termList = [];
                for (var i in data) {
                    if (i == 0) {
                        termName = data[i].termName;    //学期名
                        scoreReport(data[i].id);
                        $(".schoolYear").html(termName);
                    }
                    map.set(data[i].termName, data[i].id);
                    termList.push(data[i].termName);
                }

                $("#schoolYear").picker({
                    title: "请选择学年",
                    onClose: function () {
                        var termName = this.cols[0].displayValue;
                        flag = true;
                        $(".schoolYear").html(termName);
                        scoreReport(map.get(termName));
                    },
                    cols: [
                        {
                            textAlign: 'center',
                            values: termList
                        }
                    ]
                });
            },
            error: function (data) {
                $.alert("系统异常,请联系管理员", "");
            }
        });
    }

    function scoreReport(termId) {
        $.ajax({
            url: basePath + "/xs/score/report/studentGrade",
            type: 'POST',
            dataType: "json",
            data: {
                studentId: "${student.studentId}",
                termId: termId
            },
            success: function (rspData) {
                if (rspData.code == '000') {
                    if (rspData.data == null) {
                        $.alert("暂无成绩报告数据!", "");
                        return;
                    }
                    if (flag == false) {
                        $(".schoolYear").html(termName);
                    }
                    loadReportHtml(rspData.data);
                }
            },
            error: function (data) {
                $.alert("系统异常,请联系管理员", "");
            }
        });
    }

    function loadReportHtml(report) {
        //Handlebars.compile(source);   编译模板
        var myTemplate = Handlebars.compile($("#report-table-template").html());
        Handlebars.registerHelper("equal", function (v1, v2, options) {
            if (v1 == v2) {
                //满足添加继续执行
                return options.fn(this);
            } else {
                //不满足条件执行{{else}}部分
                return options.inverse(this);
            }
        });
        $('#reportResult').html(myTemplate(report));
    }
</script>
</html>